<script setup>
let day = Array.apply(null, { length: 7 }).map(() => []);
const prpos = defineProps({
  itemList: Array,
});
prpos.itemList.forEach((item) => {
  day[item.xqj - 1].push(item);
});

const emit = defineEmits(["itemClick"]);
const handleItemClick = (item) => {
  emit("itemClick", item);
};
</script>

<template>
  <view class="course-content flex flex-sub" style="height: 100%">
    <view
      class="curriculum-item flex flex-column"
      style="height: 100%"
      v-for="item in day"
      :key="item"
    >
      <view class="item-box" style="height: 100%">
        <view class="item-box-line flex flex-column">
          <view class="item-line flex flex-column" style="flex: 5">
            <view
              class="line-dashes flex-sub"
              v-for="item in 5"
              :key="item"
            ></view>
          </view>
          <view class="item-line flex flex-column" style="flex: 4">
            <view
              class="line-dashes flex-sub"
              v-for="item in 4"
              :key="item"
            ></view>
          </view>
          <view class="item-line flex flex-column" style="flex: 2">
            <view
              class="line-dashes flex-sub"
              v-for="item in 2"
              :key="item"
            ></view>
          </view>
        </view>
        <view
          class="item flex flex-column"
          style="height: 100%"
          v-for="(classItem, index) in item"
          :key="index"
        >
          <view
            class="item-other"
            :style="{ flex: classItem.jcs[0] - 1 }"
          ></view>
          <view
            class="item-text-box"
            :style="{
              flex: classItem.jcs[1] - classItem.jcs[0] + 0.9,
            }"
            @click="handleItemClick(classItem)"
          >
            <view
              class="item-text flex flex-column justify-center"
              :style="{
                backgroundColor: classItem.bgColor ? classItem.bgColor : 'red',
              }"
            >
              <text>{{ classItem.kcmc }}</text>
              <text class="address-text">@{{ classItem.cdmc }}</text>
              <text class="mt-xxs">{{ classItem.xm }}</text>
            </view>
          </view>
          <view
            class="item-other"
            :style="{ flex: 11.1 - classItem.jcs[1] }"
          ></view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.curriculum-item {
  flex: 1;
  .item-box {
    position: relative;
    font-size: 24rpx;
    .item-box-line {
      height: 100%;
      .item-line {
        border-bottom: 1px solid #f0f0f0;
        &:last-child {
          border-bottom: none;
        }
        .line-dashes {
          border-top: 1px dashed #f6f6f6;
          border-right: 1px dashed #f6f6f6;
          &:first-child {
            border-top: none;
          }
        }
      }
    }
    .item {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 6rpx;
      .item-text-box {
        z-index: 999;
        .item-text {
          display: flex;
          align-items: center;
          height: 100%;
          margin: 8rpx 0;
          color: #fff;
          border-radius: 12rpx;
          text-align: center;
          .address-text {
            color: #ffffffcc;
            font-size: 12px;
          }
        }
      }
      .item-other {
        z-index: -999;
      }
    }
  }
}
</style>
